<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>块级作用域</title>
</head>

<body>
    <script>
        (function () {
            // ES5没有块级作用域，这意味着在块语句{}花括号内定义的变量，
            // 实际上是在包含函数outputNum中定义的变量，所以在块语句外也能正常访问
            function outputNum(count) {
                for (var i = 0; i < count; i++) {
                    console.log(i);
                }
                console.log("for循环体外：" + i);
            }

            outputNum(3);

            // ES6中有了块级作用域 使用let 关键字声明变量
            function outputNum1(count) {
                for (let i = 0; i < count; i++) {
                    console.log(i);
                }
                // 在{} 外就不能访问其内部的变量了
                // console.log("for循环体外："+i); //报错 i is not defined
            }

            outputNum1(3);

            // 模仿块级作用域  利用函数执行后变量对象立即销毁的特性 创建一个立即执行的匿名函数即可
            function outputNum2(count) {
                (function () {
                    for (var i = 0; i < count; i++) {
                        console.log(i);
                    }
                })();
                // 立即执行后其变量对象也随之销毁了 所以在外面就不能访问其内部的变量-ms-overflow-x: hidden;了
                // console.log("for循环体外："+i); 报错 i is not defined
            }

            outputNum2(3);

        })();
    </script>
</body>

</html>